import React, { Component } from 'react'
import { apiShopSalesReturnOrderDetail } from '@/request/orderManagement'
import GoBack from '@/components/TheGoBack'
import { Space, Table, Tag } from 'antd'
import '../MallOrder/style/style.less'
import TheImage from '@/components/TheImage'
import _ from 'lodash'
import ChargebackSteps from './ChargebackSteps'

class Details extends Component {
  state = {
    dataSource: {},
    columns: [
      {
        title: '商品信息',
        render: (text, record) => {
          return (
            <div style={{ display: 'flex', alignItems: 'center', position: 'relative', }}>
              <TheImage src={record.goodsImage} width={100} />
              <span style={{ margin: '0 10px' }}>{record.goodsName}</span>
              <span>{record.sku}</span>
              {
                record.giftId !== '0' &&
                <div className='gift'>赠</div>
              }

            </div>
          )
        },
      },
      {
        title: '商品单价',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, render) => {
          return <>
            <React.$price price={text || 0} />
            {

              render.activityType === 'SECKILL_HOMEPAGE' && <div style={{ color: 'red' }}>秒杀价</div>
            }
            {
              render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
            }
          </>
        },
      },
      {
        title: '商品数量',
        dataIndex: 'orderProductCount',
        key: 'orderProductCount',
        render: (text) => text || 0,
      },
      {
        title: '备注',
        dataIndex: 'skuDescription',
        key: 'skuDescription',
        render: (text) => text || '',
      },
      {
        title: '总计',
        dataIndex: 'orderPriceTotal',
        key: 'orderPriceTotal',
        render: (text) => <React.$price price={text || 0} />,
      },
    ],
  }

  async componentDidMount() {
    await this.getDetails()
  }

  getDetails = async () => {
    const shopSalesReturnId = this.props.match.params.id
    const response = await apiShopSalesReturnOrderDetail({ shopSalesReturnId })
    if (response.code === 0) {
      const dataSource = response.data
      // console.log(dataSource)
      const detailsData = [
        {
          title: '售后金额',
          value: (
            <React.$Price price={dataSource.orderDetailVo.detailPayPrice} />
          ),
        },
        {
          title: '售后方式',
          value: dataSource.moneyStatus === 'N' ? '仅退款' : '退货退款',
        },
        {
          title: '售后原因',
          value: dataSource.remark,
        },
        {
          title: '售后数量',
          value: dataSource.returnOrderCount,
        },
        {
          title: '售后编号',
          value: dataSource.returnCode,
        },
        {
          title: '售后发起时间',
          value: dataSource.createTime,
        },
        {
          title: '售后备注',
          value: dataSource.otherInfo,
        },
        {
          title: '售后状态',
          value: this.getOrderState(dataSource.salesStatus),
        },
        {
          title: '售后照片',
          value: (
            <Space>
              {_.toString(dataSource.returnDocuments)
                ? _.toString(dataSource.returnDocuments)
                  .split(',')
                  .map((v) => {
                    return <TheImage src={v} width={100} />
                  })
                : ''}
            </Space>
          ),
        },
        {
          title: '寄回凭证',
          value: (
            <Space>
              {_.toString(dataSource.returnVoucher)
                ? _.toString(dataSource.returnVoucher)
                  .split(',')
                  .map((v) => {
                    return <TheImage src={v} width={100} />
                  })
                : ''}
            </Space>
          ),
        },
      ]
      const productSkuJson = dataSource.orderDetailVo
      const { goodsSkuJson } = productSkuJson
      let obj = JSON.parse(goodsSkuJson)
      let arr = obj.skuAttribute.map((v) => {
        return v.value
      })
      const productData = [
        {
          goodsName: productSkuJson.goodsName,
          orderPrice: productSkuJson.orderPrice,
          orderProductCount: productSkuJson.orderProductCount,
          orderPriceTotal: productSkuJson.orderPriceTotal,
          sku: arr,
          goodsImage: productSkuJson.goodsImage,
          productSkuJson,
          giftId: productSkuJson.giftId,
          activityType: productSkuJson.activityType,
          skuDescription:productSkuJson.skuDescription
        },
      ]
      let receiving = null //服务器返回收货信息才显示
      if (
        dataSource.memberName ||
        dataSource.memberPhone ||
        dataSource.memberAddress
      ) {
        receiving = [
          {
            title: '收货人',
            value: dataSource.memberName,
          },
          {
            title: '联系电话',
            value: dataSource.memberPhone,
          },
          {
            title: '收货地址',
            value: dataSource.memberAddress,
          },
        ]
      }
      this.setState({
        dataSource,
        detailsData,
        productData,
        receiving,
      })
    }
  }
  getOrderState = (value) => {
    let label = null
    switch (value) {
      case '1':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '2':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '3':
        label = <span style={{ color: '#d9001b' }}>退款中</span>
        break
      case '4':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '5':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '6':
        label = <span style={{ color: '#c280ff' }}>退款失败</span>
        break
      case '0':
        label = <span style={{ color: '#B8741A' }}>退款关闭</span>
        break
      case '9':
        label = <span style={{ color: '#70b685' }}>退款成功</span>
        break
      default:
    }
    return label
  }

  refreshPage = () => {
    setTimeout(() => this.getDetails(), 1000)
  }

  render() {
    const { dataSource, detailsData, columns, productData, receiving } =
      this.state
    return (
      <>
        {' '}
        <div className={'p-layout-box order-details'}>
          <GoBack history={this.props.history} title={'订单详情'} />
          <div className={'p-layout-content'}>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>
                订单号：{dataSource.orderCode || ''}
              </div>
              {dataSource.salesStatus && dataSource.moneyStatus && (
                <ChargebackSteps
                  salesStatus={dataSource.salesStatus}
                  countdown={dataSource.countdown}
                  moneyStatus={dataSource.moneyStatus}
                  refreshPage={this.refreshPage}
                  dataSource={dataSource}
                />
              )}
            </div>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>订单概况</div>
              <ul className={'order-details-information'}>
                {_.map(detailsData, (v, i) => {
                  return (
                    <li className={'order-details-information-item'}>
                      <span className={'item-title'}>{v.title}</span>
                      <span className={'item-separated'}>:</span>
                      <span className={'item-value'}>{v.value}</span>
                    </li>
                  )
                })}
              </ul>
            </div>
            <div className={'order-details-content'}>
              <div className={'order-details-title'}>商品信息</div>
              <Table
                dataSource={productData}
                columns={columns}
                pagination={false}
                summary={(pageData) => {
                  let totalOrderPriceTotal = 0
                  let totalOrderProductCount = 0
                  pageData.forEach(({ orderPriceTotal, orderProductCount }) => {
                    totalOrderPriceTotal += orderPriceTotal || 0
                    totalOrderProductCount += orderProductCount || 0
                  })
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell colSpan={5}>
                          <div style={{ textAlign: 'center' }}>
                            {`共${totalOrderProductCount}件商品，总计`}
                            <React.$price price={totalOrderPriceTotal || 0} />元
                          </div>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  )
                }}
              />
            </div>
            {receiving == null ? (
              <div />
            ) : (
              <div className={'order-details-content'}>
                <div className={'order-details-title'}>收货信息</div>
                <ul className={'order-details-receiving'}>
                  {_.map(receiving, (v, i) => {
                    return (
                      <li key={i} className={'order-details-receiving-item'}>
                        <span className={'item-title'}>{v.title}</span>
                        <span className={'item-separated'}>:</span>
                        <span>{v.value}</span>
                      </li>
                    )
                  })}
                </ul>
              </div>
            )}
          </div>
        </div>
      </>
    )
  }
}

export default Details
